10
תגובות

איך מסתירים ומציגים DIV באמצעות JQUERY

פתח ניב ,
אהלן,
יש לי 3 DIVים מוסתרים, ואני רוצה ליצור כפתור לכל DIV שיציג את התוכן שלו.
<div id="information">
  <div id="more_info">
    תוכן מוסתר1
  </div>
</div>
<div id="information">
  <div id="more_info">
    תוכן מוסתר2
  </div>
</div>
<div id="information">
  <div id="more_info">
    תוכן מוסתר3
  </div>
</div>

אני מסתיר ומציג את התוכן בצורה הבאה:
$(document).ready(function() {    $("#information #more_info").hide();
$("#Show").click(function () {
      $("#information #more_info").show('slow');
    });
  });
וב-HTML ע"י INPUT:
<input id="Show" type="button" value="ראה עוד" />

עכשיו, אני מניח שחלקכם כבר זיהו את הבעיה, כאשר לוחצים על הכפתור, הוא מציג את כל שלושת ה-DIVים המוסתרים. איך אני גורם לו להציג רק את הDIV שדרכו לחצו על הכפתור?
אני מניח שאני צריך לתת לו ID מסויים או ליצור 3 פונקציות ובכל פעם לקרוא לפונקציה אחרת, יש דרך יעילה יותר?
תודה!

10 תשובות

avatar ענה Plural ב 19 ליוני 2012 #

אתה לא נותן דרך שתייחס את הכפתור לדיב שאתה רוצה שיפתח בכלל..
אבל בכל מקרה תשתמש בסלקטור this או בייחוס אליו. נגיד:

<script>
$(document).ready(function()
{
$(":button").click(function()
{
$(this).next("div").hide();
});
});
</script>

<input type="button" value="Button" />
<div>
text
</div>

avatar ענה ניב ב 19 ליוני 2012 #

עשיתי משהו כזה:

$(document).ready(function() {    $("#information #more_info1, #more_info2, #more_info3").hide();
  $("a[id='show1']").click(function () {
      $("#more_info1").show('slow');
      $("#small_information1").hide('slow');
    });
    $("a[id='show2']").click(function () {
      $("#more_info2").show('slow');
      $("#small_information2").hide('slow');
    });
    $("a[id='show3']").click(function () {
      $("#more_info3").show('slow');
      $("#small_information3").hide('slow');
    });
  });

מה דעתך?

avatar ענה Plural ב 19 ליוני 2012 #

אני לא יודע בדיוק איך הקוד html שלך נראה, אבל זה לא נראה לי הכי אידיאלי לעשות ככה..
ערכתי לפני רגע את ההודעה שלי. תראה מה עשיתי.

avatar ענה ניב ב 19 ליוני 2012 #

קצת הסתבכתי בהבנה. למה משמשות הנקודותיים לפני המילה BUTON ? מה עושה הפונקציה NEXT?

avatar ענה Plural ב 19 ליוני 2012 #

:button זה סלקטור לציון input מסוג button.
יש גם text , :password: וכו'.
הפונקציה next מכוונת לאלמנט הבא שנמצא בקוד מהסוג שביקשת (במקרה שאני עשיתי - div).
אתה יכול לקרוא על זה יותר לעומק פה - http://api.jquery.com/next/
(:

avatar ענה iiddaannyy ב 19 ליוני 2012 #

$(document).ready(function() {
  $('.information > .more_info').hide().siblings('.show').click(function() {
    $(this).siblings('.more_info').show();
  });
});

<div class="information">
  <div class="more_info">
    תוכן 1
  </div>
  <input type="button" value="ראה עוד" class="show" />
</div>
<div class="information">
  <div class="more_info">
    תוכן 2
  </div>
  <input type="button" value="ראה עוד" class="show" />
</div>
<div class="information">
  <div class="more_info">
    תוכן 3
  </div>
  <input type="button" value="ראה עוד" class="show" />
</div>

avatar ענה ניב ב 19 ליוני 2012 #

יש לי שתי DIVים, אחד מהם מציג תוכן מקוצר ונקרא <div id="small_information> ואחד מהם מציג את התוכן המלא, והוא מוסתר more_info. כאשר לוחצים על קישור של "קרא עוד" זה מסתיר את SMALL INFORMATION ומציג את MORE INFO
לכל DIV כזה צירפתי מספר ID כדי לזהות אותו.
עשיתי את הקוד הבא:

$(document).ready(function() {    $("#information #more_info1, #more_info2, #more_info3").hide();
  $("a[id='show1']").click(function () {
      $("#more_info1").show('slow');
      $("#small_information1").hide('slow');
    });
    $("a[id='show2']").click(function () {
      $("#more_info2").show('slow');
      $("#small_information2").hide('slow');
    });
    $("a[id='show3']").click(function () {
      $("#more_info3").show('slow');
      $("#small_information3").hide('slow');
    });
  });

איך אני מייעל אותו למצב של פונקציה אחת שתדע להציג את MORE INFO ולהסתיר את SMALL INFORMATION?
תודה רבה וסליחה שאני משגע :)

avatar ענה Y_Y ב 19 ליוני 2012 #

מוזר שאף אחד לא הזיכר .toogle עושה לבד hide וshow

avatar ענה iiddaannyy ב 19 ליוני 2012 #

id לא מתאים לדבר הזה. תראה את מה שאני עשיתי, השתמשתי ב-class (אותו קלאס לאלמנטים שונים).

@Y_Y
הוא רוצה רק לעשות show.

avatar ענה משתמש_243635 ב 19 ליוני 2012 #

הקוד שלך לא עובד לי אחי.